<template>
    <view class="mt-24 order br-24">
        <view class="order-top align-center space-between pl-30 pr-24 pt-18">
            <view class="ft-32 bold">酒店订单</view>
            <hj-login @click.stop="toOrderList" @init="goOrderList">
                <view class="ft-26 t-9 align-center">
                    <view class="mr-4">全部订单</view>
                    <hj-image src="right-03.png" height="24rpx" width="24rpx" mode="aspectFit" />
                </view>
            </hj-login>
        </view>
        <view class="order-list flex">
            <hj-login
                v-for="item in orderStatusList"
                :key="item.id"
                @click="toOrderList(item.statusList)"
                class="w100"
                @init="goOrderList(item.statusList)"
            >
                <view class="order-list-item column center w100 pb-36 pt-20">
                    <hj-image :src="item.icon" height="56rpx" width="56rpx" mode="aspectFit" />
                    <view class="ft-28 t-3 mt-20 line-height1">{{ item.name }}</view>
                    <view v-if="item.count && token" class="cout center ft-24 t-w br-14">{{
                        item.count
                    }}</view>
                </view>
            </hj-login>
        </view>
    </view>
</template>

<script setup>
/**
 * @description 订单模块
 * @author yinzhi
 * @date 2025-05
 */
import { computed, defineComponent } from 'vue'
defineComponent({
    name: 'UserOrder'
})
import { useStore } from 'vuex'
const store = useStore()
const token = computed(() => store.state.auth.token || '')

const props = defineProps({
    orderCount: {
        type: Object,
        default: () => ({
            checkedInNum: 0,
            stayPayNum: 0,
            waitCheckInNum: 0
        })
    }
})
// 订单状态列表
const orderStatusList = computed(() => {
    return [
        {
            id: 1,
            statusList: '1',
            name: '待支付',
            icon: 'myOrder-05.png',
            count: props.orderCount.stayPayNum
        },
        {
            id: 2,
            statusList: '2,3',
            name: '待入住',
            icon: 'myOrder-02.png',
            count: props.orderCount.waitCheckInNum
        },
        {
            id: 3,
            name: '入住中',
            statusList: '4',
            icon: 'myOrder-03.png',
            count: props.orderCount.checkedInNum
        },
        {
            id: 4,
            statusList: '5,6,7',
            name: '已完成',
            icon: 'myOrder-04.png',
            count: 0
        }
    ]
})

const emit = defineEmits(['init'])

const handleInit = () => {
    emit('init')
}

// 跳转到订单列表
const toOrderList = statusList => {
    uni.navigateTo({
        url: `/pages/order/order-list/index?status=${statusList || ''}`
    })
}

// 登录后的初始化事件
const goOrderList = async statusList => {
    await handleInit()
    await toOrderList(statusList)
}
</script>

<style scoped lang="scss">
.order {
    background: $uni-bg-color;
    box-shadow: 0 0 10rpx 0 rgba($color: #000000, $alpha: 0.08);
    &-list {
        &-item {
            position: relative;
            .cout {
                position: absolute;
                top: 12rpx;
                left: 50%;
                margin-left: 12rpx;
                z-index: 6;
                background: $uni-color-primary;
                height: 28rpx;
                min-width: 28rpx;
            }
        }
    }
    &-top {
        height: 70rpx;
    }
}
</style>
